React-Native 接入百度统计SDK

七月 16, 2018

准备工作

  1. 申请百度账号；
  2. 登录百度统计
  3. 注册App应用，获取appkey 注册app
  4. 到我的报告里查看应用appkey

IOS集成

这里采用的手工集成sdk
采用Cocoapods集成可以查看官网 Cocoapods集成

  1. 下载SDK
  2. 下载sdk后解压，将BaiduMobStat.h和libBaiduMobStat.a添加到ios的工程中去 添加sdk01 添加sdk02
  3. 添加完后 添加完后

  4. 在项目的Build Target添加Linked Frameworks and Libraries,添加列表如下：

    Foundation.framework
UIKit.framework
CoreGraphics.framework
CoreTelephony.framework
SystemConfiguration.framework
CoreLocation.framework
Security.framework
AdSupport.framework (V4.6.4版本更新后，新增IDFA采集)
libstdc++.tbd
libz.1.2.5.tbd
// 使用“无埋点”版本的SDK，需要额外引用以下两个系统库
libicucore.tbd
WebKit.framework(Optional)

  5. 至此ios的sdk就集成完毕

导出方法给react-native使用

  1. 新建MobStat文件，如图 MobStat
  2. 编写代码
    //
//  MobStatModule.m
//  example
//
//  Created by 曾相友 on 2018/8/22.
//  Copyright © 2018年 Facebook. All rights reserved.
//

//#import <Foundation/Foundation.h>
#import <React/RCTEventEmitter.h>
#import <React/RCTLog.h>
#import "BaiduMobStat.h"

@interface MobStatModule : NSObject <RCTBridgeModule>
@end

@implementation MobStatModule

RCT_EXPORT_MODULE(MobStat);

RCT_EXPORT_METHOD(setDebugOn:(BOOL) on) {
  [[BaiduMobStat defaultStat] setEnableDebugOn: on];
}

RCT_EXPORT_METHOD(setAppKey:(NSString *) key) {
  [[BaiduMobStat defaultStat] startWithAppId:key];
}

RCT_EXPORT_METHOD(onPageStart:(NSString *)name) {
  [[BaiduMobStat defaultStat] pageviewStartWithName:name];
}

RCT_EXPORT_METHOD(onPageEnd:(NSString *)name) {
  [[BaiduMobStat defaultStat] pageviewEndWithName:name];
}

@end

Android集成

这里采用的gradle集成sdk

  1. 配置build.gradle

    dependencies {
    ...
     compile 'com.baidu.mobstat:mtj-sdk:latest.integration'
    ...
 }

  2. 编译工程

  3. 配置AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.GET_TASKS" />

  4. 至此Android的sdk就集成完毕

导出方法给react-native使用

  1. 新建文件 MobStat.java

  2. 编写代码MobStatPackage:

    package com.shandudata.zhimekaimen.MobStat;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class MobStatPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new MobStatModule(reactContext));
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

  3. 编写代码MobStatModule:

    package com.shandudata.zhimekaimen.MobStat;

import com.baidu.mobstat.StatService;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MobStatModule extends ReactContextBaseJavaModule {
    private ReactApplicationContext reactContext;
    public MobStatModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "MobStat";
    }

    @ReactMethod
    public void setAppKey(String key) {
        StatService.setAppKey(key);
    }

    @ReactMethod
    public void setDebugOn(boolean on) {
        StatService.setDebugOn(on);
    }

    @ReactMethod
    public void onPageStart(String name) {
        StatService.onPageStart(this.reactContext, name);
    }

    @ReactMethod
    public void onPageEnd(String name) {
        StatService.onPageEnd(this.reactContext, name);
    }
}

  4. 在MainApplication中加入package导出 MainApplication

    ...
new MobStatPackage(),
...

react-native使用sdk

  1. 新建MobStat.js

    import { NativeModules, Platform } from "react-native";
const { MobStat } = NativeModules;

export default {
    setAppKey: key => MobStat && MobStat.setAppKey(Platform.select(key)),
    setDebugOn: on => MobStat && MobStat.setDebugOn(on),
    onPageStart: name => MobStat && MobStat.onPageStart(name),
    onPageEnd: name => MobStat && MobStat.onPageEnd(name)
};

  2. 使用

    
import MobStat from "./MobStat";

// 设置百度统计
MobStat.setAppKey({
  ios: config.mobStatIosKey,  // config.mobStatIosKey 就是在注册App应用时候获取的key
  android: config.mobStatAndroidKey // config.mobStatAndroidKey 就是在注册App应用时候获取的key
});
MobStat.setDebugOn(true);

  3. 百度统计埋点设置

    componentDidMount() {
    MobStat.onPageStart(`title`)
}

componentWillUnmount() {
    MobStat.onPageEnd(`title`)
}
← Mongoose踩坑路 DDA算法 →